<template>
  <view>
    <view class="header c-p15 c-pt60 c-color-fff">
      <view class="c-flex c-flex-between">
        <view>
          <u-icon name="arrow-left" color="#fff" size="32"></u-icon>
        </view>
        <view class="c-color-fff">退款详情</view>
        <view></view>
      </view>
      <view class="c-p15 c-mt40 c-pb5 c-fw600 c-fs-34 c-letter-2">
        <text class="c-mr10">退款中</text>
        <u-icon name="checkmark-circle-fill" color="#fff" size="34"></u-icon>
      </view>
      <view class="c-p15 c-pt0 c-letter-2 c-fw100"> <text class="c-mr10">2020年11月26日 </text> 19:58</view>
    </view>
    <view class="c-flex c-p15 c-flex-between c-border-bottom">
      <view class="color-main">退款总金额</view>
      <view class="color-main">￥ <text class="c-fs-38">99.00</text></view>
    </view>
    <view class="c-flex c-p15 c-flex-between c-border-bottom">
      <view>退回银行卡</view>
      <view>￥ <text>99.00</text></view>
    </view>
    <view class="c-p15">
      <u-steps :list="numList" :current="1"></u-steps>
    </view>
    <view class="c-flex c-p15 c-flex-between c-border-bottom c-border-top">
      <view class="c-color-000">退款信息</view>
      <u-icon name="arrow-right"></u-icon>
    </view>
    <view class="c-border-bottom">
      <view class="c-flex c-flex-between c-index-padding">
        <view>
          <image src="/static/image/mybg.jpg" mode="" />
        </view>
        <view class="c-flex c-flex-column c-flex-between labelwidth">
          <view>水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水</view>
          <view class="smallColor">颜色分类：狗屁股</view>
          <view class="c-flex c-flex-between">
            <view class="c-red">￥99.00</view>
            <view class="smallColor">×1</view>
          </view>
        </view>
      </view>
    </view>
    <view class="twoColor c-index-padding">
      <view class="c-flex c-mt10">
        <view>退款原因:</view>
        <view class="c-ml10">不喜欢/不想要</view>
      </view>
      <view class="c-flex c-mt10">
        <view>退款原因:</view>
        <view class="c-ml10">不喜欢/不想要</view>
      </view>
      <view class="c-flex c-mt10">
        <view>退款原因:</view>
        <view class="c-ml10">不喜欢/不想要</view>
      </view>
      <view class="c-flex c-mt10">
        <view>退款原因:</view>
        <view class="c-ml10">不喜欢/不想要</view>
      </view>
      <view class="c-flex c-mt10">
        <view>退款原因:</view>
        <view class="c-ml10">不喜欢/不想要</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      numList: [
        {
          name: '卖家退款\n2020'
        },
        {
          name: '出库'
        },
        {
          name: '运输'
        },
        {
          name: '签收'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  height: 310rpx;
  background: url('/static/image/mybg.png') 57% 70% / 200% no-repeat;
}
image {
  width: 250rpx;
  height: 250rpx;
}
.labelwidth {
  width: calc(61%);
  padding: 10rpx 0;
}
.smallColor {
  font-size: 25rpx;
  color: #CBC4CF;
}
.twoColor {
  font-size: 27rpx;
  color: #CBC4CF;
}
</style>
